<script setup>
import {loadingBar} from "../HomeView_N.vue"
import {onMounted, ref} from "vue";
import axios from "axios";

const loginUser = ref(getUser());
const incomeData = ref({
  todayIncome:0,
  monthIncome:0,
  totalIncome:0
})

const loadData = () => {
  axios({
    method: "get",
    url: BASE_URL+"/v1/rider/select?userId="+loginUser.value.userId
  }).then(res => {
    if (res.data.code === 2000) {
      incomeData.value = res.data.data;
      loadingBar.finish();
    } else {
      message().error('加载数据失败咯~');
    }
  })
}
onMounted((() => {
  loadData();
}))
</script>

<template>
  <n-flex style="gap: 20px 0;padding: 0 150px">
    <div style="width: 100%;">
      <div style="margin-bottom: 20px">
        <span style="font-size: 20px">收益中心</span>
      </div>
      <n-card title="收益概览">
        <n-flex style="justify-content: space-between;gap: 50px" align="center">
          <n-flex style="width: 60%;justify-content: space-between">
            <div style="padding: 30px 40px">
              <div style="text-align: center">今日收益</div>
              <span style="font-size: 30px;color: #eae24c">
              <n-number-animation
                  ref="numberAnimationInstRef"
                  :from="0.00"
                  :to="incomeData.todayIncome"
                  :precision="2"
                  show-separator
              />
            </span>
            </div>
            <div style="padding: 30px 40px">
              <div style="text-align: center">本月收益</div>
              <span style="font-size: 30px;color: #eae24c">
              <n-number-animation
                  ref="numberAnimationInstRef"
                  :from="0.00"
                  :to="incomeData.monthIncome"
                  :precision="2"
                  show-separator
              />
            </span>
            </div>
            <div style="padding: 30px 40px">
              <div style="text-align: center">账户总收益</div>
              <span style="font-size: 30px;color: #eae24c">
              <n-number-animation
                  ref="numberAnimationInstRef"
                  :from="0.00"
                  :to="incomeData.totalIncome"
                  :precision="2"
                  show-separator
              />
            </span>
            </div>
          </n-flex>
          <n-button type="success" size="large" style="padding: 10px">
            <span>去提现</span>
          </n-button>
        </n-flex>
      </n-card>
    </div>
    <div style="width: 100%;">
      <div style="margin-bottom: 20px">
        <span style="font-size: 20px">开通服务</span>
      </div>
      <n-card title="推荐服务">
        <n-list hoverable>
          <n-list-item>
            <template #suffix>
              <n-button type="success">去开通</n-button>
            </template>
            <n-flex align="center">
              <n-avatar round></n-avatar>
              <div>
                <span style="font-size: 15px">骑手打赏</span><br>
                <span>用户可以为满意的骑手打赏，支持骑手</span>
              </div>
            </n-flex>
          </n-list-item>
          <n-list-item>
            <template #suffix>
              <n-button type="success">去开通</n-button>
            </template>
            <n-flex align="center">
              <n-avatar round></n-avatar>
              <div>
                <span style="font-size: 15px">骑手打赏</span><br>
                <span>用户可以为满意的骑手打赏，支持骑手</span>
              </div>
            </n-flex>
          </n-list-item>
          <n-list-item>
            <template #suffix>
              <n-button type="success">去开通</n-button>
            </template>
            <n-flex align="center">
              <n-avatar round></n-avatar>
              <div>
                <span style="font-size: 15px">骑手打赏</span><br>
                <span>用户可以为满意的骑手打赏，支持骑手</span>
              </div>
            </n-flex>
          </n-list-item>
        </n-list>
      </n-card>
    </div>
    <div style="width: 100%;">
      <div style="margin-bottom: 20px">
        <span style="font-size: 20px">推荐活动</span>
      </div>
      <n-card title="推荐活动">
        <div style="display: grid;grid-template-columns: repeat(2, 1fr);grid-gap: 15px;">
          <n-card>
            <n-flex style="justify-content: space-between;gap: 0 15px">
              <n-flex align="center">
                <n-avatar></n-avatar>
                <n-thing title="拼多多百亿补贴"></n-thing>
              </n-flex>
              <n-button type="success">去报名</n-button>
            </n-flex>
          </n-card>
          <n-card>
            <n-flex style="justify-content: space-between;gap: 0 15px">
              <n-flex align="center">
                <n-avatar></n-avatar>
                <n-thing title="拼多多百亿补贴"></n-thing>
              </n-flex>
              <n-button type="success">去报名</n-button>
            </n-flex>
          </n-card>
          <n-card>
            <n-flex style="justify-content: space-between;gap: 0 15px">
              <n-flex align="center">
                <n-avatar></n-avatar>
                <n-thing title="拼多多百亿补贴"></n-thing>
              </n-flex>
              <n-button type="success">去报名</n-button>
            </n-flex>
          </n-card>
          <n-card>
            <n-flex style="justify-content: space-between;gap: 0 15px">
              <n-flex align="center">
                <n-avatar></n-avatar>
                <n-thing title="拼多多百亿补贴"></n-thing>
              </n-flex>
              <n-button type="success">去报名</n-button>
            </n-flex>
          </n-card>
        </div>
      </n-card>
    </div>
  </n-flex>
</template>

<style scoped>

</style>